<template>
  <div ref="chart" style="width: 100%; height: 13vw;"></div>
</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios';
import { useStore } from "@/store/index.js";

export default {
  data() {
    return {
      chart: null,
      option: {
        title: {
          text: '土壤成分历史图',
          left: 'center', // 确保标题居中
          textStyle: {
            fontWeight: 'bold',
            color: '#00eaff',
            textShadow: '0px 0px 8px #00eaff' // 发光效果
          }
        },
        tooltip: {
          trigger: 'axis',  // 鼠标悬浮时触发 'axis'，即触发整个轴线的提示框
          axisPointer: {
            type: 'line', // 指示器类型为线
            lineStyle: {
              color: '#00eaff', // 设置指示线的颜色
              width: 2,
              type: 'dashed' // 虚线
            }
          },
          textStyle: {
            color: '#ffffff', // 设置tooltip字体颜色为白色
          },
          formatter: function (params) {
            // params 是一个数组，其中每个元素对应一个系列的数据
            let tooltipHtml = `<strong>${params[0].name}</strong><br/>`; // 显示时间
            params.forEach(item => {
              tooltipHtml += `${item.seriesName}: ${item.value}<br/>`; // 显示系列名称和数据值
            });
            return tooltipHtml; // 返回自定义的tooltip内容
          }
        },
        legend: {
          data: ['Nitrogen', 'Potassium', 'Phosphorus'],
          top: '10%',  // 设置图例位置在顶部，避免和标题重叠
          textStyle: {
            color: '#ffffff', // 设置图例字体颜色为白色
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          top: '25%',
          bottom: '10%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          axisLabel: {
            color: '#ffffff',
          }
        },
        yAxis: {
          type: 'value',
          min: 'dataMin', // 使用真实数据的最小值
          max: 'dataMax', // 使用真实数据的最大值
          axisLabel: {
            color: '#ffffff',
          }
        },
        series: [
          {
            name: 'Nitrogen',
            type: 'line',
            stack: 'Total', // 堆叠
            areaStyle: {}, // 使用面积填充
            data: [],
            itemStyle: {
              color: '#ff4500' // 线条颜色
            }
          },
          {
            name: 'Potassium',
            type: 'line',
            stack: 'Total', // 堆叠
            areaStyle: {}, // 使用面积填充
            data: [],
            itemStyle: {
              color: '#1e90ff' // 线条颜色
            }
          },
          {
            name: 'Phosphorus',
            type: 'line',
            stack: 'Total', // 堆叠
            areaStyle: {}, // 使用面积填充
            data: [],
            itemStyle: {
              color: '#32cd32' // 线条颜色
            }
          }
        ]
      }
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart);
    this.fetchData(); // 初始数据加载
    // 每半个小时刷新一次
    this.dataRefreshInterval = setInterval(this.fetchData, 30 * 60 * 1000); // 30分钟
  },
  beforeUnmount() {
    // 组件销毁时清除定时器
    if (this.dataRefreshInterval) {
      clearInterval(this.dataRefreshInterval);
    }
    // 销毁echarts实例
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    async fetchData() {
      try {
        const userStore = useStore();
        const token = userStore.token;
        // 获取三个API的数据，分别是含氮量、含钾量、含磷量
        const [nitrogenData, potassiumData, phosphorusData] = await Promise.all([
          axios.get('/api/soil/N/all?sensorType=Soil_N', {
            headers: {
              Authorization: `Bearer ${token}`,
            },
          }),
          axios.get('/api/soil/K/all?sensorType=Soil_K', {
            headers: {
              Authorization: `Bearer ${token}`,
            },
          }),
          axios.get('/api/soil/L/all?sensorType=Soil_L', {
            headers: {
              Authorization: `Bearer ${token}`,
            },
          })
        ]);

        // 提取数据的时间和数值
        const nitrogen = nitrogenData.data;
        const potassium = potassiumData.data;
        const phosphorus = phosphorusData.data;

        // 获取第一个和最后一个时间
        const startTime = new Date(nitrogen[0].createdAt).getTime();
        const endTime = new Date(nitrogen[nitrogen.length - 1].createdAt).getTime();

        // 横坐标时间范围
        const timeRange = this.generateTimeRange(startTime, endTime, nitrogen.length);

        // 转换纵坐标数据
        const nitrogenValues = nitrogen.map(item => item.value);
        const potassiumValues = potassium.map(item => item.value);
        const phosphorusValues = phosphorus.map(item => item.value);

        // 设置图表数据
        this.option.xAxis.data = timeRange;
        this.option.series[0].data = nitrogenValues;
        this.option.series[1].data = potassiumValues;
        this.option.series[2].data = phosphorusValues;

        // 更新图表
        this.chart.setOption(this.option);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    },

    // 生成横坐标时间点
    generateTimeRange(startTime, endTime, length) {
      const step = (endTime - startTime) / (length - 1);
      const timeRange = [];
      for (let i = 0; i < length; i++) {
        const time = new Date(startTime + i * step);
        timeRange.push(this.formatDate(time));
      }
      return timeRange;
    },

    // 格式化时间为 'YYYY-MM-DD HH:mm'
    formatDate(date) {
      const pad = num => (num < 10 ? '0' + num : num);
      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
    }
  }
};
</script>

<style scoped>
/* 样式可根据需要进行调整 */
</style>
